<!--
 * @Author: tenet 18742176629@163.com
 * @Date: 2024-05-22 20:22:04
 * @LastEditors: tenet 18742176629@163.com
 * @LastEditTime: 2024-05-22 23:18:21
 * @FilePath: /chain-link-api-front/src/views/record/index.vue
 * @Description: 上币记录
-->
<template>
  <Header>
    <template #title>{{ $t('title.Record') }}</template>
  </Header>

  <div class="table">
    <el-table :data="tableData" border style="width: 100%; height:600px" v-loading="loading">
      <el-table-column prop="chainName" :label="$t('table.ChainName')" width="auto" align="center"></el-table-column>
      <el-table-column prop="address" :label="$t('table.Address')" width="auto" align="center"></el-table-column>
    </el-table>
  </div>

  <div class="page">
    <el-pagination v-model:current-page="pageIndex" :page-size="pageSize" layout="total, prev, pager, next"
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>

</template>

<script setup>
import { ref, onMounted, reactive, unref } from 'vue'
import Header from '../layout/header.vue'
import { getApplyTokenList } from '@/require/api'
import { useRouter } from 'vue-router';
import {ElMessage, ElPagination} from "element-plus";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
// 在组件被挂载后执行
onMounted(() => {
  getList();
});

const router = useRouter();
const pageSize = ref(10)
const pageIndex = ref(1)
const total = ref(0)
const tableData = ref([])
const loading = ref(false)

// 获取上币申请记录
async function getList() {
  try {
    loading.value = true
    const { code, data, msg } = await getApplyTokenList({
      pageIndex: pageIndex.value,
      pageSize: unref(pageSize),
    })

    if (code === 200) {
      console.log(data)
      tableData.value = data.list
      total.value = data.total
    } else {
      ElMessage.error(msg)
    }
  } catch (e) {
    console.log(e);
  } finally {
    loading.value = false
  }
}

// 分页
function handleSizeChange(val) {
  pageSize.value = val
  getList()
}

// 分页
function handleCurrentChange(val) {
  pageIndex.value = val
  getList()
}
</script>

<style scoped lang="less"></style>